import React, { useRef, useState } from "react";
import { Form, Input, Button, message } from "antd";
import { UserOutlined, LockOutlined } from "@ant-design/icons";
import { history } from "umi";

import { FormInstance } from "antd";
import { login, singleUpload } from "@/services";
import FileUploader from "@/utils/uploader";
import styles from "./index.less";

interface LoginPageProps {
  form: FormInstance;
  from: string;
  toggleMode: () => void;
}

const LoginPage: React.FC<LoginPageProps> = ({ form, from, toggleMode }) => {
  const onFinish = async (values: { username: string; password: string }) => {
    try {
      // 模拟API调用
      const { username, password } = values;
      const res = await login(username, password);
      if (!res) {
        return;
      }
      message.success("登录成功！");
      history.push(from);
    } catch (error) {
      message.error("登录失败，请重试");
    }
  };

  return (
    <div className={styles["auth-form"]}>
      <Form
        form={form}
        name="login"
        initialValues={{ remember: true }}
        onFinish={onFinish}
      >
        <Form.Item
          name="username"
          rules={[{ required: true, message: "请输入用户名" }]}
        >
          <Input prefix={<UserOutlined />} placeholder="用户名" />
        </Form.Item>

        <Form.Item
          name="password"
          rules={[{ required: true, message: "请输入密码" }]}
        >
          <Input.Password prefix={<LockOutlined />} placeholder="密码" />
        </Form.Item>

        <Form.Item>
          <Button type="primary" htmlType="submit" block>
            登录
          </Button>
        </Form.Item>

        <div className={styles["form-actions"]}>
          <Button type="link" onClick={() => toggleMode()}>
            还没有账号？立即注册
          </Button>
        </div>
      </Form>
    </div>
  );
};

export default LoginPage;
